<template>
  <div class="appClass">
    <h4>App</h4>
    {{ name }} -- {{ price }}
    <ChildComponent></ChildComponent>
  </div>
</template>

<script>
import { provide, reactive, toRefs } from 'vue';
import ChildComponent from './components/ChildComponent.vue'
export default {
  name: "App",
  components: {
    ChildComponent
  },
  setup() {
    const car = reactive({
      name: 'Benz',
      price: 3000
    })

    provide('car', car)

    return {
      ...toRefs(car)
    }
  }
};
</script>

<style>
.appClass {
  background-color: blueviolet;
  padding: 10px;
}
</style>
